<template>
  <div class="app-container">
    <el-row :gutter="20" class="header">
      <el-col :span="5">
        <el-input
          placeholder="请输入操作内容..."
          v-model="queryForm.content"
          clearable
          @keyup.enter="initNoticeList(1)"
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          placeholder="请输入操作人..."
          v-model="queryForm.query"
          clearable
          @keyup.enter="initNoticeList(1)"
        ></el-input>
      </el-col>
      <el-button
        type="primary"
        :icon="Search"
        @click="initNoticeList(1)"
        v-hasPerm="['system:notice:query']"
        >搜索</el-button
      >
      <el-button
        type="success"
        :icon="DocumentAdd"
        @click="addHandler(-1)"
        v-hasPerm="['system:notice:add']"
        >新增</el-button
      >
      <el-popconfirm
        title="您确定批量删除这些记录吗？"
        @confirm="deleteHandler(null)"
      >
        <template #reference>
          <el-button
            type="danger"
            :icon="Delete"
            :disabled="delBtnStatus"
            v-hasPerm="['system:notice:delete']"
            >批量删除</el-button
          >
        </template>
      </el-popconfirm>
    </el-row>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
      row-class-name="table-row-cls"

    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="title" align="center" />
      <el-table-column prop="content" label="内容" align="center" />
      <el-table-column prop="username" label="操作人" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="updateTime" label="更新时间" align="center" />
      <el-table-column
        prop="action"
        label="操作"
        width="150px"
        fixed="right"
        align="center"
      >
        <template v-slot="scope">
          <el-button
            type="primary"
            :icon="Edit"
            @click="editHandler(scope.row.id)"
            v-hasPerm="['system:notice:edit']"
             size="small"
             link
          >编辑</el-button>
          <el-popconfirm
            title="您确定删除这个记录吗？"
            @confirm="deleteHandler(scope.row.id)"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                v-hasPerm="['system:notice:delete']"
                size="small"
                link
              >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <notice-dialog
      v-model="dialogVisible"
      :id="noticeId"
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      @getList="initNoticeList"
    />
  </div>
</template>
<script>
export default {
  name: "notice",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import http, { getServerUrl } from "@/utils/request";
import qs from "qs";
import NoticeDialog from "./components/NoticeDialog";
import {
  Delete,
  DocumentAdd,
  Edit,
  RefreshRight,
  Search,
  Tools,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import load from "@/utils/load.js"; // 引入


const tableData = ref([]);
const total = ref(0);
const queryForm = ref({
  content: "",
  query: "",
  pageNum: 1,
  pageSize: 10,
});
const dialogVisible = ref(false);
const noticeId = ref(-1);
const dialogTitle = ref("");
const delBtnStatus = ref(true);
const multipleSelection = ref([]);

const getNoticeList = () => {
  initNoticeList(1);
};
const initNoticeList = async (pageNum) => {
  load.show()
  if (pageNum) queryForm.value.pageNum = pageNum;
  let result = await http.post("sys/notice/listAll", queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.noticeList;
    total.value = res.data.total;
    setTimeout(()=>{
      load.hide()
    },500)
  } else {
    load.hide()
  }
};
const handleSizeChange = (val) => {
  queryForm.value.pageSize = val;
  initNoticeList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNum = val;
  initNoticeList();
};

//新增用户
const addHandler = () => {
  noticeId.value = -1;
  dialogTitle.value = "新增公告";
  dialogVisible.value = true;
};
//编辑用户
const editHandler = (uid) => {
  noticeId.value = uid;
  dialogTitle.value = "编辑公告";
  dialogVisible.value = true;
};
const handleSelectionChange = (selection) => {
  // 有选择项才有批量删除
  if (selection.length > 0) delBtnStatus.value = false;
  else delBtnStatus.value = true;
  multipleSelection.value = selection;
};
const deleteHandler = async (id) => {
  var ids = [];
  if (id) {
    ids.push(id);
  } else {
    multipleSelection.value.forEach((row) => {
      if (row.id != 1) ids.push(row.id);
    });
  }
  const res = await http.post("sys/notice/delete", ids);
  const data = res.data;
  if (data.code == 200) {
    ElMessage({
      type: "success",
      message: data.msg,
    });
    initNoticeList(1);
  }
};
onMounted(() => {
  initNoticeList(1);
});
</script>

<style lang="less" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
<style lang="less">
.table-row-cls {
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>